<template>
  <div class="register">
    <!-- 头部 -->
    <NavigationBar title="注册"></NavigationBar>
    <div class="main">
      <img class="log" :src="require('@/assets/LoginLog.png')" alt="">
      <div class="content">
        <van-form @submit="onSubmit">
          <!-- 手机号 -->
          <van-field
            class="phone"
            type="tel"
            v-model="phone"
            name="phone"
            placeholder="请输入您的手机号"
          />
          <!-- 密码 -->
          <van-field
            class="password"
            type="password"
            v-model="password"
            name="password"
            placeholder="请输入您的密码"
          />
          <!-- 验证码 -->
          <div class="verifyDiv">
            <van-field
              class="verify"
              placeholder="请输入验证码"
              v-model="verify"
            />
            <van-button :disabled="state" class="send" native-type="button" @click="send">获取验证码</van-button>
          </div>
          <van-button class="sub" round block type="info" native-type="submit">注册</van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      phone: '',
      password: '',
      verify: '',
      state: false
    }
  },
// 侦听器
  watch: {
    phone() {
      this.vuexPhone = this.phone
    }
  },
// 计算属性
  computed: {},
// 事件
  methods: {
    async send(event) {
      // 判断是否正确
      if (!this.reg.phone.test(this.phone)) {
        this.$toast('请输入正确的手机号');
        return
      }
      // 验证手机号是否注册
      let verify = await this.$ajax.verifyPhone({mobile: this.phone})
      if (verify.error_code !== 0) {
        this.$toast(verify.error_desc);
        return
      }
      // 发送验证码请求
      let code = await this.$ajax.verifyCode({mobile: this.phone})
      if (verify.error_code !== 0) {
        this.$toast(verify.error_desc);
        return
      }
      this.state = true;
      let second = 90;
      event.target.innerHTML = `${second}秒`
      let timer = setInterval(() => {
        second--
        event.target.innerHTML = `${second}秒`
        if (second <= 0) {
          clearInterval(timer)
          event.target.innerHTML = "获取验证码"
          this.state = false;
        }
      }, 1000);
    },
    async onSubmit(values) {
      // 判断是否都填写
      if (!Object.values(values).every(item => item)) {
        this.$toast('每项都是必填项');
        return;
      }
      // 判断手机号是否正确
      if (!this.reg.phone.test(this.phone)) {
        this.$toast('请输入正确的手机号');
        return;
      }
      // 判断验证码是否正确
      if (!this.reg.pay.test(this.verify)) {
        this.$toast('请填写6位数字验证码');
        return;
      }
      // 判断密码是否正确
      if (!this.reg.pwd.test(this.password)) {
        this.$toast('请填写6-16位数字字母组合的密码');
        return;
      }
      // 验证手机号是否注册
      let verify = await this.$ajax.verifyPhone({mobile: this.phone})
      if (verify.error_code !== 0) {
        this.$toast(verify.error_desc);
        return
      }
      // 注册
      let register = await this.$ajax.register({mobile: this.phone, password: this.password, code: this.verify})
      if (register.error_code !== 0) {
        this.$toast(register.error_desc);
        return
      }
      this.vuexUserInfo = register
      this.$toast('注册成功，已经为您登录');
      this.vuexPhone = this.phone
      this.gotoPage("home")
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.phone = this.vuexPhone
  },
}
</script>

<style lang="scss" scoped>
.register {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 84px;

    .log {
      width: 100px;
      height: 70px;
    }

    .content {
      width: 100%;
      padding: 40px 50px;

      .phone, .password, .verify {
        width: 100%;
        background-color: transparent;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        height: 52px;
        line-height: 30px;
        display: block;
        font-size: 16px;
        min-height: 1.4em;
        overflow: hidden;
        margin-bottom: 10px;
      }

      .verifyDiv {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
      }


      .verify {
        width: 158px;
      }

      .send {
        width: 40%;
        font-size: 12px;
        background-color: #eb0028;
        color: #fff;
        height: 30px;
        line-height: 30px;
        padding: 10px;
        box-sizing: initial;
        margin-left: 10px;
        border: 0;
        border-radius: 5px;
      }

      .sub {
        background-color: #eb0018;
        color: #fff;
        margin-top: 50px;
        border-radius: 5px;
        border: 0;
        font-size: 18px;
      }
    }
  }
}
</style>